// 公共组件卡片

import { Card as Cards, Col, Descriptions } from 'antd';
import { useIntl } from 'umi';
export type IColum<T> = {
  item: {
    render?: ((record: T) => React.ReactNode) | undefined;
    key: string;
    name: string;
    span?: number;
    nameVal?: Record<string, any>;
  }[];
  title?: string;
  data: Partial<T>;
  [property: string]: any;
}[];
type IProps = {
  list: IColum<any>;
};
const Card: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { list } = props;

  return (
    <Cards
      styles={{ body: { padding: 0 } }}
      style={{ boxShadow: 'none' }}
      bordered={false}
      className="common_card"
    >
      {list.map((v, index) => {
        const { data, item, title, titleBg, style } = v;
        return (
          <div key={title} style={{ marginBottom: 30, ...style }}>
            <Descriptions
              className={` ${index == list.length - 1 ? 'common_card_item' : ''}`}
              style={{ marginTop: 10, textAlign: 'center', gap: 20 }}
              title={
                title ? (
                  <Col
                    style={{
                      backgroundColor: titleBg || '#1C74C6',
                      color: '#fff',
                      padding: '11px 0',
                    }}
                  >
                    {intl.formatMessage({
                      id: title,
                    })}
                  </Col>
                ) : null
              }
              labelStyle={{
                textAlign: 'center',
                background: '#EEF3FC',
                color: '#666',
                padding: '10px 16px',
              }}
              contentStyle={{ textAlign: 'center' }}
              size="small"
              bordered
              column={2}
            >
              {item?.length > 0 ? (
                item.map((v) => {
                  const { render, key, name, span, nameVal } = v;
                  const val = data[key] || '/';
                  return (
                    <Descriptions.Item
                      key={name}
                      label={intl.formatMessage({ id: name }, nameVal)}
                      labelStyle={{ width: '13.5%' }}
                      contentStyle={{ width: '24%' }}
                      span={span}
                    >
                      {render ? render(data) : val}
                    </Descriptions.Item>
                  );
                })
              ) : (
                <Descriptions.Item>
                  {intl.formatMessage({ id: 'product.no_data' })}
                </Descriptions.Item>
              )}
            </Descriptions>
          </div>
        );
      })}
    </Cards>
  );
};

export default Card;
